<template>
  <div>
    



  <el-form :inline="true" :model="searchForm" class="demo-form-inline">



    <br>
      <i class="el-icon-sunny" style="color:white;font-size: 24px; font-weight: bold;"></i>
      <span style="color:white;font-size: 20px; font-weight: bold;">冒险</span>


      <br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item label="游戏名" class="game-label">
        
        <el-input v-model="searchForm.game_name" placeholder="游戏名"></el-input>
      </el-form-item>


      <el-form-item label="游戏类型" class="game-label">

        <el-input v-model="searchForm.category" placeholder="游戏类型"></el-input>

      </el-form-item>



      <el-form-item label="发行日期" class="game-label">
        <el-date-picker v-model="release_date" 
        clearable
        value-format="yyyy-MM-dd"
        type="daterange"
        placeholder="选择日期"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 400px; margin-left: 20px"
      ></el-date-picker>
    </el-form-item>




      <el-form-item>
        <el-button type="warning" @click="onSubmit()" style="margin-left: 10px">搜索</el-button>
      </el-form-item>

      <el-button type="info" @click="clear" style="margin-left: 10px">清空</el-button>


      <el-form-item>
        <el-button type="primary" @click="add()" style="margin-left: 40px">新增</el-button>
      </el-form-item>


    </el-form>


    <div class="table-container">
    <el-table :data="tableData" style="width: 100%;"   header-cell-style="background-color:yellow;color:black" >
      <el-table-column prop="game_name" label="游戏名" width="180"> </el-table-column>
      

      <el-table-column  label="图片">
        <template v-slot="scope" >
          <!-- <el-image
            style="width: 140px; height: 100px; border-radius: 0%"
            :src="'http://47.99.51.143:9000/files/' + scope.row.game_image"
            :preview-src-list="['http://47.99.51.143:9000/files/' + scope.row.game_image]"
          ></el-image> -->


          <div style="position: relative; display: inline-block;">
            <el-image
              style="width: 140px; height: 100px; border-radius: 0%"
              :src="'http://47.99.51.143:9000/files/' + scope.row.game_image"
              :preview-src-list="['http://47.99.51.143:9000/files/' + scope.row.game_image]"
            ></el-image>
            
            <i
            
              v-if="scope.row.game_id == 1"
              @click="change(scope.row.id), jinshi(scope.row.game_id)"
             
              class="el-icon-star-on"
              style="position: absolute; top: 5px; right: 5px; font-size: 20px; color: #f90; cursor: pointer;"
            ></i>
            <i
              v-else
              @click="change(scope.row.id), jinshi(scope.row.game_id)"
              alert="取消收藏成功"
              class="el-icon-star-off"
              style="position: absolute; top: 5px; right: 5px; font-size: 20px; color: #f90; cursor: pointer;"
            ></i>
         
          </div>
          
        </template>
        
          
          
       
      </el-table-column>

      
     <!--  <div>
        <i class="icon" :class="isOn ? 'el-icon-star-on' : 'el-icon-star-off'" @click="toggleIcon"></i>
        
      </div> -->






      
      
      

      <!-- <el-table-column prop="is_purchased" label="是否购买" width="140">
        <template slot-scope="scope">
          {{ scope.row.is_purchased == 1 ? '已购买' : '未购买' }}
        </template>
      </el-table-column> -->

      <el-table-column prop="game_description" label="游戏描述"> </el-table-column>
      <el-table-column prop="release_date" label="发行日期"> </el-table-column>
      <el-table-column prop="category" label="种类"> </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">

          <el-button type="primary" size="medium"  @click="selectGame(scope.row.id)">评论</el-button>

         <!--  <el-button size="mini" @click="handleDelete(scope.row.id)">删除</el-button> -->
            &nbsp;&nbsp;
         
          <el-popconfirm
           confirm-button-text='好的'
          cancel-button-text='不用了'
          icon="el-icon-info"
          icon-color="red"
          title="这是一段内容确定删除吗？"
          @confirm="handleDelete(scope.row.id)"
        >
          <el-button slot="reference"  type="danger" >删除</el-button>
        </el-popconfirm>
      



          <br><br>
          <el-button type="primary" size="medium"  @click="edit(scope.row)">编辑</el-button>




          <el-button type="success" size="medium"  @click="Gamesshow(scope.row.id)">上传游戏</el-button>

        



        </template>
      </el-table-column>

    </el-table>
    </div>

   
      <el-dialog     title="修改游戏" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form">
          <el-form-item label="游戏名" prop="game_name" label-width="15%">
        <el-input 
        v-model="form.game_name"
        autocomplete="off"
        > </el-input></el-form-item>

        <el-form-item label="售价" prop="price" label-width="15%">
          <el-input 
          v-model="form.price"
          autocomplete="off"
          > </el-input></el-form-item>


          <el-form-item label="图片" label-width="15%">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              action="http://47.99.51.143:9000/files/upload"
              :on-success="successUpload"
            
              style="float: left; margin-left: 20px"
            >
            <img v-if="form.game_image" :src="'http://47.99.51.143:9000/files/' + form.game_image" class="avatar">

             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             

              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>



          






          <!-- <el-form-item label="是否购买" prop="is_purchased" label-width="15%">
            <el-input 
            v-model="form.is_purchased"
            autocomplete="off"
            > </el-input></el-form-item> -->

           <!--  <el-form-item label="是否购买" prop="is_purchased" label-width="15%">
              <el-select v-model="form.is_purchased" placeholder="请选择" style="width:100%" >
                 <el-option
                  v-for="item in genderList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item> -->





            <el-form-item label="游戏描述" prop="game_description" label-width="15%">
              <el-input 
              v-model="form.game_description"
              autocomplete="off"
              > </el-input></el-form-item>


              <el-form-item label="发行日期" prop="release_date" label-width="15%">
  <el-date-picker
    v-model="form.release_date"
    type="date"
    placeholder="选择日期"
    autocomplete="off">
  </el-date-picker>
</el-form-item>



                
                <el-form-item label="分类" prop="game_description" label-width="15%">
                  <el-select v-model="form.category"  placeholder="请选择" style="width:100%">
                    
                    <el-option
                      v-for="item in sortList"
                      :key="item.value"
                      :label="item.category"
                      :value="item.category"
                    />
                  </el-select>

                  <el-select v-model="form.sortId"  placeholder="请再确认一次" style="width:100%">
                    
                    <el-option
                      v-for="item in sortList"
                      :key="item.value"
                      :label="item.category"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>


        </el-form>





        <div slot="footer" class="dialog-footer">
          <el-button type="info" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="selectById(form.sortId), submit()">确 定</el-button>
        </div>
      </el-dialog>




      <!-- //新增游戏 -->

      <el-dialog     title="新增游戏" :visible.sync="FormVisible" width="30%">
        <el-form :model="form">
          <el-form-item label="游戏名" prop="game_name" label-width="15%">
        <el-input 
        v-model="form.game_name"
        autocomplete="off"
        > </el-input></el-form-item>




          <el-form-item label="图片" label-width="15%">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              action="http://47.99.51.143:9000/files/upload"
              :on-success="successUpload"
            
              style="float: left; margin-left: 20px"
            >
            <img v-if="form.game_image" :src="'http://47.99.51.143:9000/files/' + form.game_image" class="avatar">

             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             

              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="售价" prop="price" label-width="15%">
            <el-input 
            v-model="form.price"
            autocomplete="off"
            > </el-input></el-form-item>



          






          <!-- <el-form-item label="是否购买" prop="is_purchased" label-width="15%">
            <el-input 
            v-model="form.is_purchased"
            autocomplete="off"
            > </el-input></el-form-item> -->

            <!-- <el-form-item label="是否购买" prop="is_purchased" label-width="15%">
              <el-select v-model="form.is_purchased" placeholder="请选择" style="width:100%" >
                 <el-option
                  v-for="item in genderList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item> -->





            <el-form-item label="游戏描述" prop="game_description" label-width="15%">
              <el-input 
              v-model="form.game_description"
              autocomplete="off"
              > </el-input></el-form-item>

              <el-form-item label="发行日期" prop="release_date" label-width="15%">
             <el-date-picker
    v-model="form.release_date"
    type="date"
    placeholder="选择日期"
    autocomplete="off">
               </el-date-picker>
</el-form-item>



                <el-form-item label="种类" prop="category" label-width="15%">
                  <!-- <el-input 
                  v-model="form.category"
                  autocomplete="off"
                  > </el-input> -->
                
                
                  <el-select v-model="form.category"  placeholder="请选择" style="width:100%">
                    
                    <el-option
                      v-for="item in sortList"
                      :key="item.value"
                      :label="item.category"
                      :value="item.category"
                    />
                  </el-select>

                  <el-select v-model="form.sortId"  placeholder="请再确认一次" style="width:100%">
                    
                    <el-option
                      v-for="item in sortList"
                      :key="item.value"
                      :label="item.category"
                      :value="item.id"
                    />
                  </el-select>

                   

                
                
                
                
                </el-form-item>

               <!--  <el-form-item label="分类id" prop="sortId" label-width="15%">
                  <el-input 
                  v-model="form.sortId"
                  autocomplete="off"
                  > </el-input>
                </el-form-item> -->
        </el-form>





        <div slot="footer" class="dialog-footer">
          <el-button type="info" @click="FormVisible = false">取 消</el-button>
          <el-button type="primary" @click="selectById(form.sortId), addSubmit()">确 定</el-button>
        </div>
      </el-dialog>




      <!-- //上传游戏安装包 -->
      <el-dialog     title="上传游戏安装包" :visible.sync="GameFormVisible" width="50%">

        <el-form :model="gameform">

          <el-upload
          class="upload-demo"
          drag
      action="http://47.99.51.143:9000/newfile/upload" 
      :data="{ id: this.gameform.id }"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传 .zip/.rar 文件，且不超过 500MB</div>
      
    </el-upload>
    <div style="margin-top: 20px">
      <el-button @click="GameFormVisible = false" type="info">取 消</el-button>
      <el-button type="primary" @click="uploadOk()" style="margin-left: 20px">确 定</el-button>
    </div>


          </el-form>
        </el-dialog>

    
      <!-- //个人信息修改表单 -->
      <el-dialog title="个人信息修改"   :visible.sync="userFormVisible" width="30%">
        <el-form :model="userform">
          <el-form-item label="账户名" prop="name" label-width="15%">
        <el-input
        v-model="userform.name"
        autocomplete="off"
        > </el-input></el-form-item>

        <el-form-item label="昵称" prop="pet" label-width="15%">
          <el-input 
          v-model="userform.pet"
          autocomplete="off"
          > </el-input></el-form-item>




          <!-- <el-form-item label="头像" label-width="15%">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              action="http://47.99.51.143:9000/files/upload"
              :on-success="successUserUpload"
            
              style="float: left; margin-left: 20px"
            >
            <img v-if="userform.image" :src="'http://47.99.51.143:9000/files' + userform.image" class="avatar">

             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             

              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item> -->


          <el-form-item label="头像" >
            <el-upload
              class="avatar-uploader"
              action="http://47.99.51.143:9000/upload"
              
              name="image"
              :show-file-list="false"
              :on-success="successUserUpload"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="userform.image" :src="userform.image" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          






         <!--  <el-form-item label="性别" prop="gender" label-width="15%">
            <el-input 
            v-model="userform.gender"
            autocomplete="off"
            >  </el-input></el-form-item> -->


            <el-form-item label="性别" prop="gender" label-width="15%">
              <el-select v-model="userform.gender" placeholder="请选择" style="width:100%" >
                 <el-option
                  v-for="item in genderList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>


            <el-form-item label="手机号" prop="phone" label-width="15%">
              <el-input 
              v-model="userform.phone"
              autocomplete="off"
              > </el-input></el-form-item>
             
              <el-form-item label="邮箱" prop="email" label-width="15%">
                <el-input 
                v-model="userform.email"
                autocomplete="off"
                > </el-input></el-form-item>



                
        </el-form>





        <div slot="footer" class="dialog-footer">
          <el-button @click="userFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="userSubmit()">确 定</el-button>
        </div>
      </el-dialog>

  </div>

</template>





<script>
import request from '@/request/request.js';




export default {
  data() {
    return {
      wordFlag: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      dialogFormVisible: false,
      FormVisible: false,
      form: {
        sortId: "",
      },
      sortList: [],
      GameFormVisible: false,
      userFormVisible: false,
      userform: {
        image: "",
      },
      gameform: {
        id: "",
      },
      tableData: [],
      dept: {},
      genderList: [{ id: 1, name: "男" }, { id: 2, name: "女" }],
      searchForm: {
        game_name: "",
        category: ""
      },
      release_date: ""
    };
  },
  methods: {
    uploadOk() {
      /*  request.post("/newfile/upgrade", this.gameform).then((res) => {
         if (res.code === "0") { */

      this.$message.success({ message: "上传成功", type: "success" });
      this.GameFormVisible = false;

      /*  } else {
         this.$message({ message: "上传失败", type: "error" });
       }
     }); */
    },
    Gamesshow(id) {
      this.GameFormVisible = true;
      request.get("/games/" + id).then(res => {
        console.log(res.data);
        this.gameform.id = res.data.id;
      });
    },
    /*  upload(id){
       
       request.get("/games/" + id).then(res => {
         console.log(res.data);
         this.gameform = res.data;
       });
     }, */

    sortLoad() {
      request.get("/sort/all").then(res => {
        if (res.code === "0") {
          this.sortList = res.data;
          console.log(this.sortList);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    selectGame(id) {
      request.get('/games/' + id).then(res => {
        console.log(res.data);
        if (res.code === "0") {
          localStorage.setItem("game", JSON.stringify(res.data));
          this.$router.push({ path: '/gamedetail' });
        }

      });
    },
    change(id) {
      request.get("/games/change/" + id).then((res) => {
        if (res.code === "0") {
          /* this.$message.success({ message: "收藏成功", type: "success" }); */
          this.load();
        } else {
          /* this.$message({ message: "收藏失败", type: "error" }); */
        }
      });
    },
    jinshi(id) {
      if (id == 0) {
        this.$message({ message: "已收藏", type: "success" });
      } else {
        this.$message({ message: "取消收藏", type: "error" });
      }
    },
    userEdit() {
      request.get("/user/" + this.user.id).then((res) => {
        if (res.code === "0") {
          this.userform = res.data;
          this.user = res.data;
          localStorage.setItem("user", JSON.stringify(res.data));
          this.userFormVisible = true;
        }
      })
    },

    edit(obj) {
      this.form = obj;
      this.dialogFormVisible = true;
    },
    successUpload(res) {
      console.log(res);
      this.form.game_image = res.data;
    },
    successUserUpload(res, file) {
      console.log(res);
      console.log(file);
      this.userform.image = res.data;
      this.user.image = res.data;
      localStorage.setItem("user", JSON.stringify(this.user));
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add() {
      this.form = {};
      this.FormVisible = true;

    },
    userSubmit() {
      request.post("/user", this.userform).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "修改成功", type: "success" });
          //更新本地缓存
          /* localStorage.setItem("user", JSON.stringify(res.data)); */
          this.userFormVisible = false;
          this.load();
        } else {
          this.$message({ message: "修改失败", type: "error" });
        }
      });
    },
    selectById(id) {
      request.get("/sort/" + id).then(res => {
        if (res.code === "0") {
          this.dept = res.data;

        } else {
          this.$message.error(res.msg);
        }
      });
    },
    addSubmit() {
      /* this.selectById(this.form.sortId); */
      if (this.form.category != this.dept.category) {
        this.$message.error("请选择相同的分类");
      }
      else {
        this.form.busId = this.user.id;
        request.post("/games", this.form).then((res) => {
          if (res.code === "0") {
            this.$message.success({ message: "新增成功", type: "success" });
            this.FormVisible = false;
            this.load();
          } else {
            this.$message({ message: "新增失败", type: "error" });
          }
        });
      }

    },
    submit() {
      if (this.form.category != this.dept.category) {
        this.$message.error("请选择相同的分类");
      }
      else {
        request.post("/games", this.form).then((res) => {
          if (res.code === "0") {
            this.$message.success({ message: "修改成功", type: "success" });
            this.dialogFormVisible = false;
            this.load();
          } else {
            this.$message({ message: "修改失败", type: "error" });
          }
        });
      }
    },
    handleDelete(id) {
      request.delete("/games/" + id).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "删除成功", type: "success" });
          this.load();
        } else {
          this.$message({ message: "删除失败", type: "error" });
        }
      });
    },
    viewDetails(id) {
      alert("查看详情：" + id);
      // 可以根据 id 加载对应游戏的详情页
    },
    clear() {
      this.searchForm = { game_name: "", category: "" };
      this.load();

      this.page();
    },
    onSubmit() {
      request.get("/games/search", { params: this.searchForm }).then((res) => {
        if (res.code === "0") {
          this.tableData = res.data;
        } else {
          this.$message({ message: "查询失败", type: "error" });
        }
      });
    },
    handleSizeChange(val) {
      alert("每页记录数发生变化" + val);
    },
    handleCurrentChange(val) {
      alert("页码发生变化" + val);
    },
    load() {
      request.get("/games").then((res) => {
        if (res.code === "0") {
          this.tableData = res.data;
        } else {
          alert(res.msg);
        }
      });
    }
  },
  created() {
    this.load();
    this.sortLoad();
  },
  mounted() {
    // 页面加载完成后，开始动画
    setTimeout(() => {
      this.wordFlag = true
    }, 200)
  },
  computed: {

  }
};
</script>


<style scoped>
@import '../../css/vue.css';
/*引入自定义的css*/
</style> 

